<template>
  <div>
    <div id="radar" ref="radar" style="height:500px;margin-bottom:16px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'Radar',
  data () {
    return {
      mychart: {}
    }
  },
  mounted () {
    this.initChart()
    window.addEventListener('resize', () => {
      setTimeout(() => {
        this.mychart.resize()
      }, 500)
    })
  },
  methods: {
    initChart () {
      this.mychart = echarts.init(this.$refs.radar)
      const option = {
        backgroundColor: 'rgb(12,16,61)',
        title: {
          text: '供应商产品在本级行政区数量',
          left: '16',
          top: '16',
          textStyle: {
            color: '#fff',
            fontSize: '14',
            fontWeight: 'normal'
          }
        },
        tooltip: {},
        legend: {
          bottom: '32',
          textStyle: {
            color: '#fff'
          },
          data: ['美的', '格力', '海尔']
        },
        radar: {
          // shape: 'circle',
          center: ['50%', '45%'],
          radius: '60%',
          name: {
            textStyle: {
              color: '#fff'
            }
          },
          splitArea: {
            areaStyle: {
              opacity: 0
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgb(12,38,103)'
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgb(12,38,103)'
            }
          },
          indicator: [
            { name: '清徐县', max: 10000 },
            { name: '阳曲县', max: 10000 },
            { name: '娄烦县', max: 10000 },
            { name: '小店区', max: 10000 },
            { name: '迎泽区', max: 10000 },
            { name: '杏花岭区', max: 10000 },
            { name: '尖草坪区', max: 10000 },
            { name: '万柏林区', max: 10000 },
            { name: '晋源区', max: 10000 },
            { name: '古交市', max: 10000 }
          ]
        },
        series: [
          {
            name: '美的',
            type: 'radar',
            // areaStyle: {normal: {}},
            data: [
              {
                value: [4300, 6000, 7600, 6900, 5000, 8900, 5300, 4900, 7856, 6491],
                name: '美的在本级行政区数量',
                itemStyle: {
                  normal: {
                    color: 'rgba(0,183,238, 1)',
                    borderColor: 'rgba(0,183,238, 0.4)',
                    borderWidth: 10
                  }
                },
                areaStyle: {
                  normal: {
                    // 单项区域填充样式
                    color: 'rgba(0,183,238, 0.3)'
                  }
                }
              }
            ]
          },
          {
            name: '格力',
            type: 'radar',
            // areaStyle: {normal: {}},
            data: [
              {
                value: [6300, 5000, 6600, 7900, 8000, 4900, 6300, 5900, 6856, 5491],
                name: '格力在本级行政区数量',
                itemStyle: {
                  normal: {
                    color: 'rgba(0,183,238, 1)',
                    borderColor: 'rgba(0,183,238, 0.4)',
                    borderWidth: 10
                  }
                },
                areaStyle: {
                  normal: {
                    // 单项区域填充样式
                    color: 'rgba(245, 166, 35, 0.4)'
                  }
                }
              }
            ]
          },
          {
            name: '海尔',
            type: 'radar',
            // areaStyle: {normal: {}},
            data: [
              {
                value: [5500, 6800, 5900, 6300, 5700, 4900, 6300, 7900, 7006, 6001],
                name: '海尔在本级行政区数量',
                itemStyle: {
                  normal: {
                    color: 'rgba(0,183,238, 1)',
                    borderColor: 'rgba(0,183,238, 0.4)',
                    borderWidth: 10
                  }
                },
                areaStyle: {
                  normal: {
                    // 单项区域填充样式
                    color: 'rgba(86,199,60, 0.3)'
                  }
                }
              }
            ]
          }
        ]
      }

      this.mychart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped></style>
